<template>
    <div class="error">
        <template v-if="error.statusCode === 404">
            <h2 class="title">{{ error.statusCode }}</h2>
            <p class="msg">该页面不存在</p>
        </template>

        <template v-else>
            <h2 class="title">
                {{ error.statusCode }}
            </h2>
            <p class="msg">{{ error }}</p>
        </template>
    </div>
</template>
<script>

export default {
    props: ['error'],
    head() {
        return {
            title: this.error.statusCode
        };
    },
    data() {
        return {
            title: this.error.statusCode
        };
    }
};
</script>

<style scoped lang="less">
@import '~assets/less/normalize.less';

.error {
    min-height: 100%;
    padding-top: 100px;
}

.title {
    font-size: 50px;
    text-align: center;
    color: #333;
}

.msg {
    margin: 0 1rem;
    text-align: center;
    color: #444;
    font-size: 30px;
}
</style>
